/**
 *@title
 *@author huahuadavids
 *@date 2020/4/11
 */
import React from 'react';
import connect from "../react-redux/connect";
import actions from "../store/actions/todos";

class Todos extends React.Component {

  handleAdd = e => {
    let code = e.keyCode;
    if (code === 13) {
      this.props.addTodo(e.target.value)
      e.target.value = ''
    }
  }

  render() {
    console.log(this.props);
    return (
      <div style={{border: "1px solid green"}}>
        <input type="text" onKeyDown={this.handleAdd}/>
        <br/>
        <ul>
          {
            this.props.item.map((e, index) => {
              return <li key={index} style={{
                color: e.complete ? 'green' : ''
              }}>
                <span onDoubleClick={this.props.toggleTodo.bind(this, index)}>{e.text}</span>
              <button onClick={() => {this.props.delTodo(index)}}>delete</button>
              </li>
            })
          }
        </ul>
      </div>
    )
  }
}

export default connect(
  state => state.todos,
  actions
)(Todos)

